<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    	<link rel="stylesheet" href="css/jquery.treegrid.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.dateformat.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery.treegrid.js"></script>

		<script type="application/javascript">
			var trHtml;var tbody;
			$(function() {
				trHtml = $("#trTemp").html()
				tbody = $(".tree tbody")
				
				$("#search").click(function(){
					var data = {};
					data._id = $("[name=_id]").val();
					
					getData(data);
				});
				
				getData({});
			});
			
			function getData(data){
				
				$.get("/getJson",data,function(res){
					if(res && res.length > 0){
						tbody.html("");
						
						$.each(res,function(i,data){
							var tr = $(trHtml);
							tr.addClass("treegrid-"+i)
							setHtml(tr,data);
							tbody.append(tr);
							
							var parentId = i;
							if(data._children){
								handleChildren(data._children,parentId)
							}
						});
						$('.tree').treegrid({"initialState":"collapsed"});
					}else{
						
						tbody.html($("#nodataTemp").html())
					}
				});
			}
			
			
			
			function handleChildren(children,parentId){
				$.each(children,function(i,child){
					var tr = $(trHtml);
					var id = parentId+"-"+i
					
					tr.addClass("treegrid-"+id)
					tr.addClass("treegrid-parent-"+parentId)
					setHtml(tr,child);
					tbody.append(tr);
					
					if(child._children){
						handleChildren(child._children,id)
					}
				});
			}
			
			function setHtml(tr,data){
				var content = data._id;
				if(!content){
					content = data._startMsg;
				}
				tr.find(".content").html(content);
				if(data._startTime){
					tr.find(".start").html($.formatDate("yyyy-MM-dd hh:mm:ss.SSS",new Date(data._startTime)));
				}
				if(data._endTime){
					tr.find(".end").html($.formatDate("yyyy-MM-dd hh:mm:ss.SSS",new Date(data._endTime)));
				}
				tr.find(".spend").html(data._endTime-data._startTime);
			}
		</script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<h3>
				h3. 这是一套可视化布局系统.
			</h3>
					<form class="form-search">
						<input class="input-medium search-query" name="_id" type="text" /> <button id="search" type="button" class="btn">查找</button>
					</form>
					<table class="table tree">
						<thead>
							<tr>
								<th>内容</th>
								<th style="width: 200px;">开始时间</th>
								<th style="width: 200px;">结束时间</th>
								<th style="width: 100px;">耗时(ms)</th>
							</tr>
						</thead>
						<tbody class"_tbody">
							<template id="trTemp">
								<tr>
									<td class="content"></td>
									<td class="start"></td>
									<td class="end"></td>
									<td class="spend"></td>
								</tr>
							</template>
							<template id="nodataTemp">
								<tr>
									<td colspan="5" align="center">
										没有数据
									</td>
								</tr>
							</template>
							<tr class="treegrid-2 treegrid-parent-1"></tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>

</html>